<template>
    <!-- 添加 / 编辑窗口 -->
    <el-drawer :visible="addOrEditVisible"
               @close="onDialogClose"
               @closed="onClosed"
               custom-class="app-drawer"
               :title="dialogInfo.title"
               :size="dialogInfo.width"
               :direction="direction"
               :close-on-click-modal="false">
        <app-dialog-component
            :dialog-info="dialogInfo"
            :dialog-data="dialogData"
            :form-items="formItems"
            @change="onChangeValue"
            @success="onSuccess"
            @close="onDialogClose"
        />
    </el-drawer>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AppDialogComponent from '@/components/app-dialog/component.vue';
import { DialogConfig, DialogFormItem } from '@/store/dialog';
import { DrawerModule } from '@/store/drawer';

@Component({
    name: 'AppDrawer',
    components: { AppDialogComponent },
})
export default class AppDrawer extends Vue {

    // 窗口信息
    get dialogInfo(): DialogConfig {
        return DrawerModule.info;
    }

    // 表单数据
    get dialogData(): any {
        return DrawerModule.data;
    }

    // 弹出方向
    get direction(): string {
        return DrawerModule.info.drawer?.direction as string;
    }

    get formItems(): DialogFormItem[] {
        return DrawerModule.form;
    }

    // 窗口是否显示
    get addOrEditVisible(): boolean {
        return DrawerModule.visible;
    }

    // 值修改
    onChangeValue(item: any, value: any) {
        this.dialogData[item.prop] = value;
        DrawerModule.setValue({
            key: item.prop,
            value: value
        });
    }

    // 提交完成
    onSuccess(data: any) {
        DrawerModule.callback(data);
    }

    // 窗口关闭
    onDialogClose() {
        DrawerModule.close();
    }

    // 窗体彻底关闭
    onClosed() {
        DrawerModule.dispose();
    }
}
</script>

<style lang="scss">
.app-drawer {
    .el-drawer__body {
        position: relative;
    }
    .ke-component {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        box-sizing: border-box;
        &-content {
            flex: 1;
            overflow-y: auto;
        }
        &-footer {

        }
    }
}
</style>
